<template>
  <view class="my-container">
    <!-- 顶部背景 -->
    <view class="top-bg"></view>
    <!-- 用户信息 -->
    <view class="user-info">
      <image class="user-avatar" :src="avatarUrl" />
      <view class="user-nickname" @click="onLogin">
        {{ nickname }}
      </view>
    </view>
    <!-- 我要招聘入口 -->
    <view class="recruit-banner" @click="goRecruit">
      <image class="recruit-img" src="/static/zhaopin.png" mode="widthFix" />
    </view>
    <!-- 常用功能模块 -->
<view class="card-section">
  <view class="section-title">常用功能</view>
  <view class="feature-list">
    <view class="feature-row" v-for="(row, rowIndex) in featureRows" :key="rowIndex">
      <view class="feature-item" v-for="(item, index) in row" :key="index" @click="onFeatureClick(item)">
        <image :src="item.icon" class="feature-icon" />
        <text>{{ item.text }}</text>
      </view>
    </view>
  </view>
</view>

<!-- 交流社区模块 -->
<view class="card-section">
  <view class="section-title1">交流社区</view>
  <view class="community-list">
    <view class="community-row" v-for="(row, rowIndex) in communityRows" :key="rowIndex">
      <view class="community-item" v-for="item in row" :key="item.text" @click="onCommunityClick(item)">
        <image :src="item.icon" class="community-icon" />
        <text>{{ item.text }}</text>
      </view>
    </view>
  </view>
</view>
    <!-- 退出登录按钮，仅登录后显示 -->
    <button class="logout-btn" v-if="isLogin" @click="logout">退出登录</button>
    <!-- 底部Tab栏 -->
    <view class="tabbar">
      <view v-for="(item, index) in tabbar" :key="index" class="tab" :class="{ active: activeTab === index }" @click="changeTab(index)">
        <image class="tab-icon" :src="activeTab === index ? item.selectedIconPath : item.iconPath"></image>
        <text class="tab-label">{{ item.text }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isLogin: false,
      avatarUrl: '/static/user.png',
      nickname: '点击登录',
      phone: '',
      tabbar: [
        {
          text: '找工作',
          iconPath: '/static/zhaogongzuo0.png',
          selectedIconPath: '/static/zhaogongzuo1.png'
        },
        {
          text: '练面试',
          iconPath: '/static/lianmianshi0.png',
          selectedIconPath: '/static/lianmianshi1.png'
        },
        {
          text: '我的',
          iconPath: '/static/wode0.png',
          selectedIconPath: '/static/wode1.png'
        }
      ],
      activeTab: 2,
      features: [
        { icon: '/static/scjl1.png', text: '上传简历' },
        { icon: '/static/qzjl1.png', text: '投递进度' }, // 投递进度放在上传简历下方
        { icon: '/static/wyzr1.png', text: '我要招人' },
        { icon: '/static/shouc.png', text: '我的收藏' },
        { icon: '/static/lxwm.png', text: '联系我们' }
      ],
      community: [
        { icon: '/static/qzjl1.png', text: '求职交流' },
        { icon: '/static/msg.png', text: '面试官' }
      ]
    }
  },
  computed: {
    featureRows() {
      const rows = [];
      const itemsPerRow = 4;
      
      for (let i = 0; i < this.features.length; i += itemsPerRow) {
        rows.push(this.features.slice(i, i + itemsPerRow));
      }
      
      return rows;
    },
    communityRows() {
      const rows = [];
      const itemsPerRow = 4;
      
      for (let i = 0; i < this.community.length; i += itemsPerRow) {
        rows.push(this.community.slice(i, i + itemsPerRow));
      }
      
      return rows;
    }
  },
  methods: {
    onLogin() {
      if (this.isLogin) return;
      // 唤起微信登录
      uni.login({
        provider: 'weixin',
        success: (loginRes) => {
          // 这里需要你调用后端接口，换取手机号和用户信息
          // 假设后端返回 { phone: '13812342323' }
          uni.request({
            url: 'https://your-api.com/wechat-login', // 替换为你的后端接口
            method: 'POST',
            data: { code: loginRes.code },
            success: (res) => {
              const phone = res.data.phone || '13812342323'; // 测试用
              this.isLogin = true;
              this.phone = phone;
              this.nickname = '职观用户' + phone.slice(-4);
              // 上报后台
              uni.request({
                url: 'https://your-api.com/user/report', // 替换为你的后端接口
                method: 'POST',
                data: {
                  nickname: this.nickname,
                  phone: this.phone
                }
              });
            },
            fail: () => {
              uni.showToast({ title: '登录失败', icon: 'none' });
            }
          });
        },
        fail: () => {
          uni.showToast({ title: '微信登录失败', icon: 'none' });
        }
      });
    },
    goRecruit() {
      uni.navigateTo({ url: '/pages/recruit/index' });
    },
    onFeatureClick(item) {
      // 功能点击逻辑
      switch(item.text) {
        case '我的收藏':
          uni.navigateTo({ url: '/pages/favorites/index' });
          break;
        case '上传简历':
          if (!this.isLogin) {
            uni.navigateTo({
              url: '/pages/index/login',
              success: () => {
                // 存储跳转来源，登录成功后可以跳回简历上传页
                uni.setStorageSync('loginRedirect', '/pages/resume/upload');
              }
            });
            return;
          }
          uni.navigateTo({ url: '/pages/resume/upload' });
          break;
        case '投递进度':
          uni.navigateTo({ url: '/pages/recruit/delivery-progress' });
          break;
        case '我要招人':
          // 检查是否已认证招聘方
          const recruitAuth = uni.getStorageSync('recruitAuth')
          if (recruitAuth) {
            uni.navigateTo({ url: '/pages/recruit/index' });
          } else {
            uni.navigateTo({ url: '/pages/recruit/auth' });
          }
          break;
        case '联系我们':
          uni.navigateTo({ url: '/pages/assistant/index' });
          break;
      }
    },
    onCommunityClick(item) {
      // 社区点击逻辑
      switch(item.text) {
        case '求职交流':
        case '面试官交流':
          uni.navigateTo({ url: '/pages/assistant/index' });
          break;
      }
    },
    logout() {
      this.isLogin = false;
      this.nickname = '点击登录';
      this.phone = '';
    },
    changeTab(index) {
      this.activeTab = index;
      if (index === 0) {
        if (this.fromPage === 'company') {
          uni.redirectTo({ url: '/pages/home/index2' });
        } else {
          uni.redirectTo({ url: '/pages/home/index' });
        }
      } else if (index === 1) {
        uni.redirectTo({ url: `/pages/ai-chat/index?from=${this.fromPage}` });
      } else if (index === 2) {
        // 当前页
      }
    }
  },
}
</script>

<style scoped>
.my-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #eafff6 0%, #ffffff 100%);
  position: relative;
  padding-bottom: 140rpx;
}
.top-bg {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 220rpx;
  background: linear-gradient(135deg, #eafff6 0%, #ffffff 100%);
  z-index: 0;
}
.user-info {
  flex-direction: row;
  display: flex;
  align-items: center;
  padding: 160rpx 32rpx 24rpx 32rpx;
  position: relative;
  z-index: 1;
}
.user-avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 250%;
  margin-right: 24rpx;
  background: #f2f2f2;
}
.user-nickname {
  font-size: 36rpx;
  color: #222;
  font-weight: 600;
}
.recruit-img {
  width: 100%;
  display: block;
  overflow: hidden;
  display:flex;
  align-items: center;
  justify-content: center;
}
.section-title{
  margin-top: 10px;
  margin-left: 40rpx;
  font-size: 32rpx;
  color: #222;
  font-weight: 600
}
.section-title1{
  margin-top: 10px;
  margin-left: 40rpx;
  font-size: 32rpx;
  color: #222;
  font-weight: 600
}
.feature-list {
  margin: 32rpx 0;
}

.feature-row {
  flex-direction: row;
  display: flex;
  justify-content: flex-start;
  margin-bottom: 24rpx;
  padding: 0 32rpx;
}

.feature-row:last-child {
  margin-bottom: 0;
}

.feature-item text {
  font-size: 26rpx;
}
.community-item text {
  font-size: 26rpx;
}
.community-list {
  margin: 24rpx 0;
}

.community-row {
  flex-direction: row;
  display: flex;
  justify-content: flex-start;
  margin-bottom: 24rpx;
  padding: 0 32rpx;
}

.community-row:last-child {
  margin-bottom: 0;
}
.feature-item, .community-item {
  width: 25%; /* 修改为25%，使4个功能项能在一行内显示 */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 16rpx;
  box-sizing: border-box;
}
.feature-icon,
.community-icon {
  width: 72rpx;
  height: 72rpx;
  margin-bottom: 8rpx;
}
.tabbar {
  margin-bottom: 0rpx;
  flex-direction: row;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 16rpx;
  height: 112rpx;
  background: rgba(255,255,255,0.72);
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0 12rpx 36rpx 0 rgba(0,0,0,0.18), 0 2rpx 8rpx 0 rgba(0,0,0,0.08);
  border-radius: 24rpx;
  margin-left: 18rpx;
  margin-right: 18rpx;
  width: calc(100vw - 36rpx);
  backdrop-filter: blur(18px);
  z-index: 999;
  border: none;
}
.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #888;
  font-size: 22rpx;
  flex: 1;
  justify-content: center;
  padding: 0;
  gap: 4rpx;
}
.tab.active {
  color: #00b386;
}
.tab-icon {
  width: 44rpx;
  height: 44rpx;
  margin-bottom: 0;
}
.tab-label {
  font-size: 20rpx;
  margin-top: 0;
}
.card-section {
  flex-direction: column;
  background: #fff;
  border-radius: 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.06);
  margin: 24rpx 32rpx 0 32rpx;
  padding: 24rpx 0 8rpx 0;
}
.recruit-banner,
.card-section {
  margin-bottom: 0rpx; /* 统一间距 */
}</style>
